<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Quicksand">

    <link rel="stylesheet" href="css/index.css" />
</head>

<body>
    <audio src="./audio/1.mp3" autoplay loop></audio>
    <header>
        <nav class="navBox">
            <div class="left">
                <div class="logoimg">
                    <img src="images/logo.jpg" alt="Your Logo">
                </div>
                <h2 style="font-style: oblique;">Homepage</h2>
            </div>
            <div class="right">
                <!-- <ul>
                    <li><a href="index.html" style="color: red;">Home page</a></li>
                  <li><a href="jineng.html" style="color: red;">Skills page</a></li>
                  <li><a href="photos.html" style="color: red;">Gallery page</a></li>
                  <li><a href="shixi.html" style="color: red;">Internship page</a></li>
                  <li><a href="contact.html" style="color: red;">Contact page</a></li>
                    <li><a href="zhiye.html" style="color: red;">Career page</a></li>
                    <li><a href="aid.html" style="color: red;">Ambitions page</a></li>
                    <li><a href="hobby.html" style="color: red;">Hobbies page</a></li>
                </ul> -->
                <ul id="nav">
                    <li class=".one">

                        <a href="index.html" style="color: red;">Home page</a>
                        <ul class="two">

                            <li> <a href="zhiye.html" style="color: red;">Career page</a></li>
                            <li><a href="jineng.html" style="color: red;">Skills page</a></li>
                        </ul>
                    </li>
                    <li class=".one">
                        <a href="aid.html" style="color: red;">Ambitions page</a>
                        <ul class="two">

                            <li><a href="jineng.html" style="color: red;">Skills page</a></li>
                            <li><a href="photos.html" style="color: red;">Gallery page</a></li>
                        </ul>
                    </li>
                    <li class=".one">
                        <a href="hobby.html" style="color: red;">Hobbies page</a>
                        <ul class="two">

                            <li><a href="contact.html" style="color: red;">Contact page</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </header>
    <div class="container">
        <div class="lunbo">
            <img src="./images/bj.webp" alt="">
        </div>
        <div class="title">
            <p style="font-size: 50px;">Welcome you to my home page!</p>

        </div>
    </div>

    <!-- 文章部分 -->
    <div class="article banner imgico" style="margin-top: 24px;">
        <p style="font-weight: 700; text-align: center;">■ Self-introduction</p>

        <div class="item">
            <p><img src="./images/bj-index.jpg" alt="" style="position: absolute; height: 450px; left: 50%; transform: translateX(-50%); opacity: 0.3;"></p>
            <p style="margin: 50px 0 ;">Hello, I am Linxuan Duan, a student from the Federal University. Now I am working as a web front-end designer at Dynamic Web Duo. I am very honored to have the opportunity to work with you here and look forward to learning more knowledge and
                skills from all the professionals in the next 12 weeks.</p>

            <p style="margin: 20px 0;line-height: 40px;">On the technical side, I have a solid foundation of HTML, CSS and JavaScript, and have deep understanding and practical experience with the main frameworks for front-end development such as React and Vue. I am familiar with and able to use
                front-end automated test tools and libraries for unit testing and integration testing.
            </p>
            <p style="margin: 20px 0;">
                In terms of teamwork, I always keep an open mind, I am good at listening to others' opinions, suggestions and suggestions, and I can actively coordinate and communicate effectively with my team members. I believe that good teamwork is the key to the success
                of the project, and I am willing and able to actively adapt to the new environment and challenges. In addition, I understand and am able to follow company engineering practices and standards, including code specification, versioning, and
                bug tracking. I have a deep understanding of web design and user experience and am committed to creating web applications that are user friendly, excellent performance and easy to maintain.
            </p>
            <p style="margin: 20px 0; line-height: 40px;">Although I am still a junior web front-end designer, I have full enthusiasm for learning and a dedicated working attitude. I believe that through continuous learning and practice, I can quickly improve my skills and make contributions to the
                team.
            </p>
            <p style="line-height: 40px;">
                Thank you for giving me this internship opportunity. I look forward to learning and growing in this excellent team, and making my own contribution to the success of "Dynamic Web Duo". Thank you again for giving me this opportunity to personally participate
                in and promote the progress of this project.</p>
        </div>
    </div>



    <footer>
        <div class="footer" style="height: 100px;">
            <p style="text-align: center; margin-bottom: 50px;">
                <div class="box">
                    <h3 style="font-size: 35px;">personal homepage</h3>
                </div>
            </p>
            <p style="font-size: 20px;color: #000;">2023/10/20</p>
            <p style="font-size: 20px;color: #000;">@all right reserved</p>
            <!-- 添加三个logo -->
            <div class="logo-container">
                <img src="icon/1.png" alt="Logo 1" class="footer-logo">
                <img src="icon/2.png" alt="Logo 2" class="footer-logo">
                <img src="icon/3.png" alt="Logo 3" class="footer-logo">
            </div>
        </div>

    </footer>
</body>
<script>
    var nav = document.getElementById("nav");
    var lis = nav.children;
    for (var i = 0; i < lis.length; i++) {
        lis[i].onmouseover = function() {
            this.children[1].style.display = "block";
        }
        lis[i].onmouseout = function() {
            this.children[1].style.display = "none";
        }
    }
</script>

</html>